<template>
  <div class="department-container">
    <a-card class="card">
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        layout="inline"
        @finish="getTableList"
        ref="formRef"
      >
        <a-form-item label="部门名称" name="depart">
          <a-input
            v-model:value="formState.depart"
            placeholder="请输入部门名称"
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button @click="onReset">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-card class="card depart-table">
      <div class="add-depart">
        <a-button type="primary" @click="onAddDepart">新增部门</a-button>
      </div>
      <a-table
        :columns="columns"
        :loading="tableLoading"
        :dataSource="tableList"
        bordered
        :scroll="{ x: 800, y: 500 }"
        :pagination="false"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <a-switch
              :checked="record.status === 1"
              checked-children="启用"
              un-checked-children="禁用"
              @change="onChangeDeptStatus(record)"
            />
          </template>
          <template v-if="column.key === 'action'">
            <div class="action-btn">
              <a-button type="primary" @click="onEditDept(record)" size="small"
                >编辑</a-button
              >
              <a-button type="danger" size="small">删除</a-button>
            </div>
          </template>
        </template>
      </a-table>
      <ApartModal
        :visible="apartVidible"
        @update:visible="toggleApartVisible"
        :apartData="apartment"
        :apartList="tableList"
      />
    </a-card>
  </div>
</template>
<script lang="ts" setup>
import { IApartment } from "@/type/System";
import SystemService from "@/service/systemService";
import { createVNode, onMounted, ref } from "vue";
import { FormInstance, Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import ApartModal from "./components/apartModal.vue";

const columns = [
  {
    title: "部门名称",
    dataIndex: "title",
    key: "title",
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
  },
  {
    title: "备注",
    dataIndex: "message",
    key: "message",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    key: "createTime",
  },
  {
    title: "操作",
    key: "action",
    width: 180,
    fixed: "right",
  },
];

const tableList = ref<IApartment[]>([]); // 表格数据
const tableLoading = ref(false); // 表格loading
const apartVidible = ref(false); // 部门编辑新增弹框
const apartment = ref<IApartment | any>(null); // 表格编辑选中的部门
const formState = ref({
  depart: "",
});
const formRef = ref<FormInstance>();

const onAddDepart = () => {
  apartment.value = undefined;
  toggleApartVisible();
};
const toggleApartVisible = () => {
  apartVidible.value = !apartVidible.value;
};
const onEditDept = (record: IApartment) => {
  apartment.value = record;
  toggleApartVisible();
};
const onChangeDeptStatus = (record: IApartment) => {
  Modal.confirm({
    title: "温馨提示",
    icon: createVNode(ExclamationCircleOutlined),
    content: "确定要更改 " + record.title + " 的状态吗？",
    okText: "确定",
    cancelText: "取消",
    onOk() {
      record.status = record.status === 1 ? 0 : 1;
    },
    onCancel() {},
  });
};
const getTableList = async () => {
  tableLoading.value = true;
  const res = await SystemService.getApartment();
  tableList.value = res;
  setTimeout(() => {
    tableLoading.value = false;
  }, 1000);
};
const onReset = () => {
  formRef.value?.resetFields();
};
onMounted(() => {
  getTableList();
});
</script>
<style lang="less" rel="stylesheet/less" scoped>
.department-container {
  margin: 6px;
  height: calc(100% - 50px);
  display: flex;
  flex-direction: column;

  .card {
    overflow: scroll;
    box-shadow: 0px 0px 12px rgb(0 0 0 / 12%);
    border-radius: 4px;
    margin: 8px 5px;
  }

  .depart-table {
    flex: 1;

    .add-depart {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 16px;
    }

    .action-btn {
      display: flex;
      justify-content: space-around;
    }
  }
}
</style>
